<template>
    <div class>
        <el-card class="ep-card ep-search">
                <el-row :gutter="0">
                    <el-col :span="3" style="float:right">
                    <el-button type="primary"  @click="back">返回</el-button>
                    </el-col>
                   
                    <el-col :span="2" style="float:right">
                        <el-button type="success"  @click="submit">提交</el-button>
                      </el-col>
                      <el-col :span="2" style="float:right">
                          <el-button type="success"  @click="save">保存</el-button>
                        </el-col>
                </el-row>
         </el-card>
            <el-tabs type="border-card" @tab-click="changeTab">
            <el-tab-pane label="安排会议信息">
                <el-form :model="tdbConference" ref="tdbEntApply" inline label-position="right" >
                    <el-form-item label="会议主题"  required>
                        <el-input v-model="tdbConference.confTheme"
                                style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="会议日期" required>
                        <el-time-picker v-model="tdbConference.confDate" format="yyyy年MM月dd日" type="date" placeholder="请输入会议日期" style="width: 200px"></el-time-picker>
                    </el-form-item>

                    <el-form-item label="会议时间" required>
                        <el-time-picker v-model="tdbConference.confTime" format="HH时mm分ss秒" type="date" placeholder="请输入会议时间" style="width: 200px"></el-time-picker>
                    </el-form-item>

                    <el-form-item label="会议地点" required>
                        <el-input v-model="tdbConference.confSite" style="width:800px">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="参会人员" required >
                        <el-transfer
                        :titles="['未参加人员','参加人员']"
                        :data="users"
                        v-model="tdbConference.users"
                        :props="{
                            key: 'value',
                            label: 'desc'
                            }"
                        :button-texts="['到左边', '到右边']" 
                        @change="handleChange3"   
                       style="width:800px" >
                    </el-transfer>
                    </el-form-item>
                    <el-form-item label="备注"  >
                        <el-input v-model="tdbConference.remark" type="textarea" :autosize="{minRows: 2,maxRows: 2}"  style="width:800px" ></el-input>
                    </el-form-item>      
                </el-form> 
            </el-tab-pane>
           
            <el-tab-pane label="选择上会项目">
                <el-card class="ep-card ep-search">
                    <div slot="header" class="clearfix">
                        <span>未召开评审会列表</span>
                    </div>
                    <el-table :data="ChargeData" border style="width: 100%" size="mini">
                        <el-table-column  align="center" width="50">
                        <template slot="header">
                        <el-button class="el-icon-circle-plus" type="text" @click.prevent="ChargeAddRow()"></el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" class="el-icon-remove"
                            @click="ChargeHandleDelete(scope.$index, scope.row)"></el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        type="index"
                        width="50" label="NO.">
                        </el-table-column>
                        
                        <el-table-column label="会议主题" align="center" >
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.confTheme" disabled></el-input>
                            </template>
                             
                        </el-table-column>
                        <el-table-column label="会议日期" align="center">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-model="scope.row.confDate"
                                    type="date"
                                    style="width: 100%;"
                                    disabled
                                    >
                             </el-date-picker>
                        </template>
                        </el-table-column>
                        <el-table-column label="会议时间" align="center">
                        <template slot-scope="scope">
                            <el-date-picker
                                    v-model="scope.row.confTime"
                                    type="date"
                                    style="width: 100%;"
                                    disabled
                                    >
                             </el-date-picker>
                        </template>
                        </el-table-column>
                        <el-table-column label="会议地点" align="center" prop="createUserId">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.confSite" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center">
                            <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" ></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card class="ep-card ep-search">
                    <div slot="header" class="clearfix">
                        <span>申请上会项目列表</span>
                    </div>
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                     @selection-change="handleSelectionChange"
                    style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="projCode"
                            align="center"
                            label="项目编号">
                        </el-table-column>
                        <el-table-column
                            prop="projName"
                            align="center"
                            width="180"
                            label="客户名称">
                        </el-table-column>
                        <el-table-column
                            prop="curreny"
                            align="center"
                            width="180"
                            label="担保金额(万元)">
                        </el-table-column>
                        <el-table-column
                            prop="guaterm"
                            align="center"
                            width="180"
                            label="担保期限(月)">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            width="180"
                            label="项目经理A角">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.managera" style="width: 100%;" placeholder="请选择" disabled >
                                    <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id">
                                    </el-option>
                                </el-select> 
                            </template> 
                        </el-table-column>
                        <el-table-column
                            align="center"
                            width="180"
                            label="项目经理B角">
                           <template slot-scope="scope">
                                <el-select v-model="scope.row.managerb" style="width: 100%;" placeholder="请选择"  disabled>
                                    <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id">
                                    </el-option>
                                </el-select> 
                            </template> 
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane> 
                     
          </el-tabs>

        
    </div>
  </template>
  
  <script>
  export default {
    components: {
    },
    data() {
       return{
             user:'',
        projectId:'',
        opinion:{},
        myOpinion:{},
        userList:[],
        users:this.getMockData(),
        taskWorkitem:{},
        tdbConference:{
          hymc:'',
          hyrq:new Date(),
          hysj:new Date(),
          hydd:'',
          remark:'',
          users:[],
          confUsers:[],
        },
        listStyle: {
            width: '350px',
            height: '300px'
        },
        ChargeData:[],
        tableData:[],
       };
    },
    computed: {},

    mounted() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
       this.findProjectIsNotRoadShow();
       this.getusers();
           },
    methods: {
        handleSelectionChange: function (val) {
            console.log(val);
        },
        findProjectIsNotRoadShow(){
            let params = {};
                    this.$api
                    .formPost(  "/api/biz/flow/flowCheckConference/doGetProjectsIsNotRoadShow", params)
                    .then(res => {
                        if (res.retHead.code == "0000000") {
                            this.tableData=res.retBody;
                            
                        }
                    });
        },
           //增加收费标准一行
        ChargeAddRow(){
          var list = {
            type:'1',
            projectid:this.projectId,
            createUserName:this.user.realName,
            updateTime:new Date,
            createUserId:this.user.id
          }
          this.ChargeData.unshift(list)
        },
        //删除收费标准一行
        ChargeHandleDelete(index, row) {
        this.ChargeData.splice(index, 1);
        },
      getMockData () {
                let mockData = [];

                let params = {};
                    this.$api
                    .formPost(  "/api/auth/sysuser/doGetList", params)
                    .then(res => {
                        if (res.retHead.code == "0000000") {
                            let list=res.retBody.list;
                            for (let i = 0; i < list.length; i++) { 
                                    mockData.push({
                                        value: list[i].id,
                                        desc: list[i].realName
                                    });
                                }
                        }
                    });
                return mockData;
            },
            getTargetKeys () {
                return this.getMockData()
                        .filter(() => Math.random() * 2 > 1)
                        .map(item => item.key);
            },
           handleChange3(value, direction, movedKeys) {
             this.tdbConference.users=value;
            },
     
     
      //加载项目信息
      loanBusinessInfo(){
        this.$api
        .post("wf/common/approval?id=" + this.$route.query.id)
        .then(res => {
          if (res.status === "0") {
            if(res.data != null){
              let projectId = res.data.businessRelation.mid;
              this.projectId=projectId;
             
            } 
            if (res.data.taskWorkitem != null) {
              this.taskWorkitem = res.data.taskWorkitem;

            }

           
            }
        });
      },
       getusers() {
        let params = {};
        this.$api
          .formPost(  "/api/auth/sysuser/doGetList", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.userList = res.retBody.list;
            }
          });
        },
       
        back(){
          this.$router.push({path:"/mywork/taskLog"});
      },
      init() {
        
      },
      //保存
      save(){
          if(this.tdbConference.users.length<2){
          this.$Message.error({
                    top: 100,
                    duration: 2,
                    content: "参会人员不能少于两人,不能继续"
                  });
          return;
        }
          var map = new Map();
          let userList=[];
          for(var i=0;i<this.data.length;i++){
            map.set(this.data[i].key,this.data[i].label);
          }
          for(var j=0;j<this.tdbConference.users.length;j++){
           let username=  map.get(this.tdbConference.users[j]);
           userList.push({
            userid:this.tdbConference.users[j],
            username:username,
            sfzp:username=="评审意见A(主评)"?"1":"0",
           });
          }
          this.tdbConference.confUsers=userList;
       
          
      },
      //提交
      submit(){
        let params = {};
        params.taskWorkitemId=this.taskWorkitem.id;
        params.isSubmit = "1";
        params.userId =this.user.id;
        params.variables = {
 
        };
         this.$api.post("wf/submit", params).then(res => {
            if (res.status === "0") {
              this.$message({
                type: "success",
                message: "保存成功!"
              });
            
              if (params.isSubmit) {
                this.$router.push({
                  path: "/mywork/taskLog"
                });
              } else {
                this.getBusinessInfo();
              }
            }
          }); 
      },
       changeTab(a, b) {
            let tabName = b.target.innerText;
            if ('选择上会项目' == tabName) {
             console.log(tabName);
            }
          },
    
        
    },
    created() {}
  };
  </script>
  <style lang='scss' scoped>
  /deep/ .el-checkbox{
      display: block;
  }
  </style>